import { Download, Chrome, Settings, Puzzle, CheckCircle, AlertCircle } from 'lucide-react';

const InstallGuidePage = () => {
  const steps = [
    {
      icon: <Download size={24} />,
      title: '下载插件文件',
      description: '从我们的官方网站下载Chrome插件安装包',
      details: [
        '点击页面上的"下载插件"按钮',
        '选择适合您系统的版本',
        '等待下载完成'
      ]
    },
    {
      icon: <Chrome size={24} />,
      title: '打开Chrome浏览器',
      description: '确保您使用的是最新版本的Chrome浏览器',
      details: [
        '打开Chrome浏览器',
        '检查浏览器版本（建议使用Chrome 88+）',
        '确保浏览器已更新到最新版本'
      ]
    },
    {
      icon: <Settings size={24} />,
      title: '进入扩展程序页面',
      description: '在Chrome中打开扩展程序管理页面',
      details: [
        '在地址栏输入：chrome://extensions/',
        '或者点击菜单 → 更多工具 → 扩展程序',
        '确保右上角的"开发者模式"已开启'
      ]
    },
    {
      icon: <Puzzle size={24} />,
      title: '安装插件',
      description: '将下载的插件文件拖拽到扩展程序页面',
      details: [
        '将下载的.crx文件拖拽到扩展程序页面',
        '或者点击"加载已解压的扩展程序"选择解压后的文件夹',
        '等待安装完成'
      ]
    },
    {
      icon: <CheckCircle size={24} />,
      title: '验证安装',
      description: '确认插件已成功安装并正常工作',
      details: [
        '检查扩展程序列表中是否显示红小匠·AI插件',
        '点击插件图标确认功能正常',
        '在浏览器工具栏中查看插件图标'
      ]
    }
  ];

  const troubleshooting = [
    {
      icon: <AlertCircle size={20} />,
      title: '插件无法安装',
      solution: '确保已开启开发者模式，并尝试重新下载插件文件'
    },
    {
      icon: <AlertCircle size={20} />,
      title: '插件图标不显示',
      solution: '点击扩展程序页面的"详细信息"，确保插件已启用'
    },
    {
      icon: <AlertCircle size={20} />,
      title: '功能无法使用',
      solution: '刷新页面或重启浏览器，检查网络连接是否正常'
    },
    {
      icon: <AlertCircle size={20} />,
      title: '权限被拒绝',
      solution: '在扩展程序页面点击"详细信息"，检查并授予必要权限'
    }
  ];

  const systemRequirements = [
    'Chrome浏览器版本 88.0 或更高',
    'Windows 10/11, macOS 10.15+, 或 Linux',
    '至少 100MB 可用磁盘空间',
    '稳定的网络连接'
  ];

  const handleDownload = () => {
    window.open('http://hongxiaojiang.com/hongxiaojiang-1.01.zip', '_blank');
  };

  const handleSourceDownload = () => {
    // 如果需要源码包，可以指向不同的链接
    window.open('http://hongxiaojiang.com/hongxiaojiang-1.01.zip', '_blank');
  };

  return (
    <div className="install-guide-page">
      <div className="container">
        {/* 页面头部 */}
        <div className="guide-header">
          <h1>Chrome插件安装教程</h1>
          <p>按照以下步骤，轻松将红小匠·AI插件安装到您的Chrome浏览器中</p>
        </div>

        {/* 系统要求 */}
        <div className="system-requirements card">
          <h2><Chrome className="icon" /> 系统要求</h2>
          <ul>
            {systemRequirements.map((requirement, index) => (
              <li key={index}>{requirement}</li>
            ))}
          </ul>
        </div>

        {/* 安装步骤 */}
        <div className="install-steps">
          <h2>安装步骤</h2>
          <div className="steps-container">
            {steps.map((step, index) => (
              <div key={index} className="step-card">
                <div className="step-number">{index + 1}</div>
                <div className="step-icon">
                  {step.icon}
                </div>
                <div className="step-content">
                  <h3>{step.title}</h3>
                  <p>{step.description}</p>
                  <ul>
                    {step.details.map((detail, detailIndex) => (
                      <li key={detailIndex}>{detail}</li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 下载区域 */}
        <div className="download-section card">
          <h2>下载插件</h2>
          <p>选择适合您系统的版本进行下载</p>
          <div className="download-buttons">
            <button className="btn btn-primary" onClick={handleDownload}>
              <Download size={20} />
              下载Chrome插件
            </button>
            <button className="btn btn-secondary" onClick={handleSourceDownload}>
              <Download size={20} />
              下载源码包
            </button>
          </div>
          <div className="download-info">
            <p><strong>文件大小：</strong>约 2.5MB</p>
            <p><strong>最新版本：</strong>v1.01</p>
            <p><strong>更新日期：</strong>2024年1月15日</p>
            <p><strong>下载地址：</strong><a href="http://hongxiaojiang.com/hongxiaojiang-1.01.zip" target="_blank" rel="noopener noreferrer">http://hongxiaojiang.com/hongxiaojiang-1.01.zip</a></p>
          </div>
        </div>

        {/* 故障排除 */}
        <div className="troubleshooting card">
          <h2>常见问题</h2>
          <div className="troubleshooting-grid">
            {troubleshooting.map((item, index) => (
              <div key={index} className="troubleshooting-item">
                <div className="troubleshooting-icon">
                  {item.icon}
                </div>
                <div className="troubleshooting-content">
                  <h4>{item.title}</h4>
                  <p>{item.solution}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 联系支持 */}
        <div className="support-section card">
          <h2>需要帮助？</h2>
          <p>如果您在安装过程中遇到任何问题，我们的技术支持团队随时为您提供帮助</p>
          <div className="support-actions">
            <button className="btn btn-primary" onClick={() => window.location.href = '/#contact'}>
              联系技术支持
            </button>
            <button className="btn btn-secondary" onClick={() => window.open('https://docs.example.com', '_blank')}>
              查看详细文档
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default InstallGuidePage; 